<html>

<head>
    <title>WebRTC capture video and audio</title>
    <style>
        .none {
            -webkit-filter: none;
        }
        
        .blur {
            -webkit-filter: blur(3px);
        }
        
        .grayscale {
            -webkit-filter: grayscale(1);
        }
        
        .invert {
            -webkit-filter: invert(1);
        }
        
        .sepia {
            -webkit-filter: sepia(1);
        }
    </style>
</head>

<body>
    ============== 用于显示和选择设备 ==================
    <div>
        <label>输入设备:</label>
        <select id="audioSource"></select>
    </div>
    <div>
        <label>输出设备:</label>
        <select id="audioOutput"></select>
    </div>
    <div>
        <label>视屏输出设备:</label>
        <select id="videoSource"></select>
    </div>
    ============== 视频效果选择 ==================
    <div>
        <label>Filter:</label>
        <select id="filter">
				<option value = "none">None</option>
				<option value = "blur">模糊</option>
				<option value = "grayscale">灰度</option>
				<option value = "invert">反色</option>
				<option value = "sepia">褐色</option>
			</select>
    </div>
    ============== 显示视频图像 ==================
    <selection>
        <!--autoplay 表示一进来就播放 controls表示显示播放的按钮-->
        <!--<audio autoplay controls id = 'audioplayer'></audio>-->
        <table>
            <tr>
                <td><video autoplay playsinline id="player"></video></td>
                <td><video playsinline id="recplayer"></video></td>
                <td>
                    <div id='constraints' class='output'></div>
                </td>
            </tr>
            <tr>
                <td> <button id="record">Start Record</button></td>
                <td> <button id="recplay" disabled>Play</button></td>
                <td> <button id="download" disabled>Download</button></td>
            </tr>
        </table>

    </selection>

    <div>
        <button id="snapshort">截取快照</button>
    </div>
    <div>
        <canvas id="picture">截取快照</canvas>
    </div>

    <!-- ==============   js   ================== -->
    <script src="./client.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>

</html>